<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta charset="utf-8" />
		<style type="text/css">
			body {
				font-size: 15px;
			}
			
			div {
				width: 400px;
				height: 20px;
				border: 1px solid #000000;
				background-color: #ddd;
				padding: 10px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			var citys = [
				["成都市", "绵阳市", "南充市"],
				["广州市", "肇庆市", "深圳市"],
				["武汉市", "黄冈市", "荆门市"]
			];

			function selectCity(index) {
				var city = citys[index];			
				var $city = $("#city");
				//清空city中的内容
				$city.empty();
				//往city中追加选项的值
				$city.append($("<option>--请选择--</option>"));
				
				var i = 0;
				
				//根据市的下标，更改县/区下标的起始值 下标从0开始
				if(index == 1){
					i = 3;
				}else{
					if(index == 2){
						i = 6;
					}
				}
				//遍历
				for(one of city) {
					var $c = $("<option></option>").text(one).val(i);
					i++;
					$city.append($c);
					
				}			
			}
		</script>
		
		<script type="text/javascript">
			var countries = [
				["青羊区", "郫都区", "温江区"],
				["涪城区", "游仙区", "安州区"],
				["仪陇县", "营山县", "南部县"],
				["天河区", "白云区", "黄埔区"],
				["端州区", "鼎湖区", "高要区"],
				["福田区", "罗湖区", "盐田区"],
				["汉南区", "蔡甸区", "黄陂区"],
				["浠水县", "罗田县", "英山县"],
				["东宝区", "掇刀区", "沙洋县"]
			];
			
				function selectCountry(i){
					var country = countries[i];
					var $country = $("#country");
					$country.empty();
					$country.append($("<option>--请选择--</option>"));
					for (one of country) {
						var $ct = $("<option></option>").text(one);
						$country.append($ct);
					}
				}
				
		</script>
		
	</head>

	<body>
		<h2>三级联动：省、市、县/区</h2>
		<div class="bg-primary">

			省：
			<select id="province" onchange="selectCity(this.value)">
				<option>--请选择--</option>
				<option value="0">四川省</option>
				<option value="1">广东省</option>
				<option value="2">湖北省</option>
			</select>
			市：
			<select id="city" onchange="selectCountry(this.value)">
				<option>--请选择--</option>
			</select>
			县/区：
			<select id="country">
				<option>--请选择--</option>
			</select>
			<p id="pid"></p>
		</div>
		 
		 
		<input id="btnLoad" type="button" value="加载">
		<script type="text/javascript">
		document.getElementById("btnLoad").onclick = function(){
			//1、创建XmlHttpRequest对象
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			console.log(xmlhttp);
			//2、发送Ajax请求
			xmlhttp.open("GET","/Three_Level_Linkage/Province",false);
			xmlhttp.send();
			console.log("请求发送完成");
			//3、处理服务器响应
			xmlhttp.onreadystatechange = function(){
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
					var text = xmlhttp.responseText;
					console.log(text);
					
				}
			}
		}
		
		
		</script>
	</body>

</html>